<template>
    <div class="templ">
        <div class="buy">
            <router-link v-bind='{to:"/"+code+"/"+code+"buy"}'>
                <mt-button type="danger">预选号</mt-button>
            </router-link>
        </div>
        <ul class="lotteryInfos">
            <li v-for="item in list" class="lotteryInfo">
                <div class="title">
                    <div>第{{item.expect}}期</div>
                </div>
                <div class="balls">
                    <span v-for="code in item.opencode" class="ball"
                          v-bind='{class:code.length>2?"blue":"red"}'>
                                    {{parseInt(code)}}
                    </span>
                </div>
                <div class="time">
                    开奖时间：{{item.opentime}}
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: ['list','code']
    }
</script>

<style scoped>
    .buy {
        width: 100%;
        border-bottom: 1px solid #e1e1e1;
        padding: 5px 20px 5px;
        display: flex;
        justify-content: flex-end;
    }

    .lotteryInfos {
        padding: 10px;
        margin: 0;
    }

    .lotteryInfo {
        border-bottom: 1px solid #e1e1e1;
        background-color: #fff;
        padding-bottom: 5px;
    }

    .title {
        height: 30px;
    }

    .title h3 {
        line-height: 30px;
    }

    .title div {
        line-height: 30px;
        font-size: 14px;
        color: #a1a1a1;
    }

    .balls {
        display: flex;
        justify-content: space-around;
        padding: 0 10px;
        margin: 10px 0;
    }

    .ball {
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color: white;
        border-radius: 50%;
    }

    .red {
        background-color: red;
    }

    .blue {
        background-color: blue;
    }

    .time {
        font-size: 14px;
        line-height: 1.5em;
        color: #007aff;
    }

</style>